<template>
  <view>
    <!-- //完善信息 -->
    <u-modal v-model="show" title="请完善个人信息" :show-cancel-button="false" confirm-color="#ec692b">
      <view class="slot-content">
        <view v-if="indent == 'all'" class="info-wrap">
          <!-- 头像 -->
          <view @click="headImage" class="info-list-cell info-item info-list-con" hover-class="cell-hover">
            <text class="cell-tit">头像</text>
            <view class="info-list-head cell-tip">
              <image :src="userInfo.headimg ? $util.img(userInfo.headimg) : $util.getDefaultImage().head"
                @error="userInfo.headimg = $util.getDefaultImage().head" mode="aspectFill" />
            </view>
            <text class="cell-more"></text>
          </view>
          <!-- 昵称 -->
          <view class="info-list-cell info-list-con" hover-class="cell-hover" @click="modifyInfo('name')">
            <text class="cell-tit">昵称</text>
            <text class="cell-tip">{{ userInfo.nickname }}</text>
            <text class="cell-more"></text>
          </view>
          <!-- 手机号 -->
          <view class="info-list-cell info-list-con" @click="modifyInfo('mobile')">
            <text class="cell-tit">手机号</text>
            <text  class="cell-tip">{{ userInfo.mobile }}</text>
            <text class="cell-more"></text>
          </view>
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>

// 文章
export default {
  name: 'diy-article',
  props: {
    token: {
      type: String
    },

  },
  data() {
    return {
      indent: 'all',
      show: false,
      memberInfo: {

      },
      memberInfoformData: {

      },
      formData: {
        nickName: '',
      }
    };
  },
  created() {
    this.init();
  },
  watch: {
    token(nVal, oVal) {
      this.init();
    }
  },
  mounted() {

  },
  onShow() {
    this.init();
    // if (!uni.getStorageSync('token')) {
    // 	setTimeout(() => {
    // 		this.$refs.login.open('/pages_tool/member/info');
    // 	});
    // } else {
    // 	this.getInfo();
    // }
  },
  computed: {
    storeToken() {
      return this.$store.state.token;
    },
    userInfo() {
      return this.$store.state.userInfo;	
    }
  },
  methods: {
    init() {
      if (uni.getStorageSync('token')) this.getMemberInfo();
    },
    headImage() {
      this.$util.redirectTo("/pages_tool/member/modify_face");
    },
    /**
     * 查询会员信息
     */
    getMemberInfo() {
      this.$api.sendRequest({
        url: '/api/member/info',
        data: {},
        success: res => {
          if (res.code == 0) {
            this.memberInfo = res.data;
            this.$store.commit('setUserInfo', res.data);
            console.log('我在这q', res.data);
            // headimg  nickname 判断是否为系统默认值
            // headimg https://thirdwx.qlogo.cn/mmopen/vi_3
            // nickname 微信用户
            console.log(!uni.getStorageSync('infoTime'));
            console.log(res.data.headimg == this.$util.getDefaultImage().head || res.data.nickname == '微信用户' || !memberInfo.mobile);
            if (!uni.getStorageSync('infoTime') && (res.data.headimg == this.$util.getDefaultImage().head || res.data.nickname == '微信用户' || !memberInfo.mobile)  ) {
              this.show = true
              this.$util.cache('infoTime', true, 60 * 60 * 12);
            }
          }
        }
      });
    },
    // 切换编辑项
    modifyInfo(action) {
      switch (action) {
        case 'cancellation':
          this.getCancelStatus();
          break;
        case 'language':
          let newArray = [];
          for (let i = 0; i < this.langList.length; i++) {
            newArray.push(this.langList[i].name)
          }
          uni.showActionSheet({
            itemList: newArray,
            success: function (res) {
              if (vm.langIndex != res.tapIndex) {
                vm.$langConfig.change(vm.langList[res.tapIndex].value)
              }
            }
          });
          break;
        default:
          this.$util.redirectTo('/pages_tool/member/info_edit', {
            action,
            cooperateId: this.cooperateId ? this.cooperateId : ''
          });
      }
    },
  }
};
</script>

<style lang="scss" scoped>
.info-list-cell {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24rpx 30rpx;
	position: relative;
	line-height: 50rpx;
	background-color: #fff;

	&:first-child {
		padding: 28rpx 30rpx;
	}
	
	.cell-tit {
		white-space: nowrap;
	}

	.cell-tip1 {
		margin-right: 40rpx;
	}

	&.log-out-btn {
		margin-top: 40rpx;

		.cell-tit {
			margin: auto;
		}
	}

	.info-list-head {
		border: 1rpx solid $color-line;
		width: 82rpx;
		height: 82rpx;
		border-radius: 50%;
	}

	.info-list-head image {
		max-width: 100%;
		max-height: 100%;
	}

	// #ifdef MP
	&.info-item {
		margin-top: 16rpx;
	}
	// #endif

	&.info-list-con ~ &.info-list-con:after {
		content: '';
		position: absolute;
		left: 30rpx;
		right: 30rpx;
		top: 0;
		border-bottom: 1rpx solid $color-line;
	}

	.cell-tip {
		margin-left: auto;
		color: $color-tip;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 470rpx;
	}

	.cell-more {
		margin-left: 10rpx;
		width: 32rpx;
		height: 100%;
	}

	.cell-more:after {
		content: '';
		display: block;
		width: 12rpx;
		height: 12rpx;
		border: 2rpx solid darken($color-line, 20%) {
			right-color: transparent;
			bottom-color: transparent;
		}

		transform: rotate(135deg);
	}
}
</style>
